<!--
 * @Author: 陈宇 975155172@qq.com
 * @Date: 2024-08-26 15:33:41
 * @LastEditors: 陈宇 975155172@qq.com
 * @LastEditTime: 2024-08-27 09:21:53
 * @FilePath: \blog-web\src\components\blog-list\BlogList.vue
 * @Description: 博客列表组件
-->
<script setup lang="ts">
import { ref, reactive, computed, watch, getCurrentInstance } from "vue";
import { Person, TimeOutline, FolderOutline, PricetagsOutline } from "@vicons/ionicons5";

import type { ListDataParam, Page } from "./model/index";
import type { abstractParam } from '@/api/article/model/index';
import { abstractList } from "@/api/article";
import { useRouter } from "vue-router";
// import { useStore } from '@/store/index';

// const store = useStore();

const router = useRouter();

const props = defineProps<{ categoriesId?: string, tagsId?: string }>();

const blogList = ref<ListDataParam[]>([]);

const pageData = reactive<Page>({
  page: 1,
  pageSize: 10,
  total: 11
});

// 请求文章
const _abstractList: any = async (data: abstractParam) => {
  let res = await abstractList({
    title: '',
    categories: data.categories,
    tag: data.tag,
    page: pageData.page,
    page_count: pageData.pageSize
  });
  const { list, total } = res;
  // const { list, total } = res.data; // 从res.data中获取list和total属性


  blogList.value = list;
  pageData.total = total || 0;
}

// 标签数据
const tagsList = computed(() => {
  return (tags: any) => {
    if(tags.length === 0) {
      return [];
    }
    else {
      return tags;
    }
  };
})

const goBlogDetails = (blogItem: ListDataParam) => {
  router.push({
    name: 'BlogAbout',
    query: {
      id: blogItem.id
    }
  })
}

const abstract = computed(() => {
  _abstractList({
    categories: '',
    tag: ''
  });
  return 'store.tags_id';
})
</script>

<template>
  <div class="blog_list">
    <div class="abstract">
      <div class="abstract_item" v-for="blogItem in blogList" :key="blogItem.id">
        <div class="title">
          <div @click="goBlogDetails(blogItem)">{{ blogItem.title }}</div>
        </div>

        <div class="y-flex action_list">
          <div class="y-flex">
            <n-icon size="14">
              <Person />
            </n-icon>

            <!-- {{ blogItem }} -->

            {{ blogItem.author }}
          </div>

          <div class="y-flex">
            <n-icon size="16">
              <TimeOutline />
            </n-icon>

            {{ blogItem.editor_time }}
          </div>

          <div class="y-flex">
            <n-icon size="16">
              <FolderOutline />
            </n-icon>

            <router-link class="categories" :to="{ path: '/categories', query: { categories_id: blogItem.categories }}">
              {{ blogItem.categories_name }}
            </router-link>
          </div>

          <div class="y-flex tag-content">
            <n-icon size="16">
              <PricetagsOutline />
            </n-icon>

            <router-link :to="{ path: '/tags', query: { tags_id: tag.id }}" class="tag" v-for="tag in tagsList(blogItem.tags_name)" :key="tag.id">
              {{ tag.tag_name }}
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <a-space fill>
      <a-pagination
        v-model:current="pageData.page"
        v-model:page-size="pageData.pageSize"
        :hide-on-single-page="true"
        :page-size-options="[10, 20, 50]"
        :total="pageData.total" 
        show-total show-jumper show-page-size/>
    </a-space>

    <span v-show="false">{{ abstract }}</span>
  </div>
</template>

<style scoped lang="scss">
.blog_list {
  flex: auto;
  width: 0;
  .abstract {
    width: 100%;

    .abstract_item {
      position: relative;
      margin: 0 auto 20px;
      padding: 16px 20px;
      width: 100%;
      overflow: hidden;
      border-radius: 0.25rem;
      box-shadow: var(--box-shadow);
      box-sizing: border-box;
      transition: all 0.3s;
      background-color: var(--background-color);
      cursor: pointer;

      &:hover {
        box-shadow: var(--box-shadow-hover);
      }

      .title {
        position: relative;
        font-size: 1.28rem;
        line-height: 46px;
        display: inline-block;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          bottom: 0;
          left: 0;
          background-color: #3eaf7c;
          visibility: hidden;
          transform: scaleX(0);
          transition: 0.3s ease-in-out;
        }

        &:hover {
          a {
            color: #3eaf7c;
          }

          &:after {
            visibility: visible;
            transform: scaleX(1);
          }
        }

        a {
          color: var(--text-color);
        }
      }

      .action_list {
        align-items: center;

        & > div {
          margin-right: 15px;
          align-items: center;

          .n-icon {
            margin-right: 5px;
          }

          .categories {
            color: var(--text-color);
          }

          &.tag-content {
            .tag {
              margin-left: 5px;
              margin-right: 10px;
              color: var(--text-color);
            }
          }
        }
      }
    }
  }
}
</style>
